import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { WeaSwitch } from 'comsMobx';
import { WeaRightMenu, WeaTop, WeaErrorPage, WeaTools, WeaFormItem, WeaSearchGroup, WeaInput, WeaDialog, WeaNewScroll } from 'ecCom';
import InstockAdd from '../capitalInstock/InstockAdd';
import { WeaLocaleProvider, WeaAlertPage } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('InventoryRemindStore')
@observer
class InventoryRemind extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.doInit(this.props);
  }
  doInit(props) {
    const { InventoryRemindStore } = props;
    const { getRemindInfo } = InventoryRemindStore;
    const { query } = this.props.location;
    const params = { cptid: query.cptid };
    getRemindInfo(params);
  }
  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    // 点击菜单路由刷新组件
    if (keyOld !== keyNew) {
      const { instockStore } = nextProps.InventoryRemindStore;
      const { initDatas } = instockStore;
      instockStore.clearStatus();
      initDatas();
    }
  }
  componentWillUnmount() {
    const { instockStore } = this.props.InventoryRemindStore;
    instockStore.clearStatus();
  }
  render() {
    const title = getLabel(82901, '资产低库存预警');
    const { InventoryRemindStore } = this.props;
    const { setVisible } = InventoryRemindStore;
    const { hasRight, verified, visible } = this.props.InventoryRemindStore.instockStore;
    if (verified && hasRight) {
      return (
        <div>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ipxnd7`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)} >
            <WeaTop
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bhb0a2`}
              title={title}
              icon={<i className="icon-coms-currency" />}
              iconBgcolor="#f14a2d"
              buttons={this.getTopButtons()}
              buttonSpace={10}
              showDropIcon
              dropMenuDatas={this.getRightMenu()}
              onDropMenuClick={this.onRightMenuClick.bind(this)}
            >
              {this.getFormFields()}
            </WeaTop>
          </WeaRightMenu>
          <WeaDialog
            ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@wpm2xd`}
            title={getLabel(83688, '填写入库单')}
            visible={visible}
            buttons={this.getBottomButtons(true)}
            icon="icon-coms-fa"
            iconBgcolor="#f14a2d"
            onCancel={() => { setVisible(false); }}
            style={{ width: 1020, height: 600 }}
          >
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@nwpeay`} datas={this.getInstockRightMenu()} onClick={this.onInstockRightMenuClick.bind(this)} >
              <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5vjbe1`} height={'100%'}>
                {this.getInstockFormFields()}
                <InstockAdd ecId={`${this && this.props && this.props.ecId || ''}_InstockAdd@6yzaj0`} />
              </WeaNewScroll>
            </WeaRightMenu>
          </WeaDialog>
        </div>
      );
    }
    if (verified && !hasRight) {
      return (
        <div>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@rh1ila`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)} >
            <WeaTop
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@8f0coh`}
              title={title}
              icon={<i className="icon-coms-currency" />}
              iconBgcolor="#f14a2d"
              buttons={this.getTopButtons()}
              buttonSpace={10}
              showDropIcon
              dropMenuDatas={this.getRightMenu()}
              onDropMenuClick={this.onRightMenuClick.bind(this)}
            >
              {this.getFormFields()}
            </WeaTop>
          </WeaRightMenu>
          <WeaDialog
            ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@h5ovhr`}
            title={getLabel(83688, '填写入库单')}
            visible={visible}
            buttons={this.getBottomButtons(false)}
            icon="icon-coms-fa"
            iconBgcolor="#f14a2d"
            onCancel={() => { setVisible(false); }}
            style={{ width: 1020, height: 600 }}
          >
            <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@5x5fza`} >
              <div style={{ color: '#000' }}>
                {getLabel(2012, '对不起，您暂时没有权限！')}
              </div>
            </WeaAlertPage>
          </WeaDialog>
        </div>
      );
    }
    return (<div />);
  }

  getFormFields() {
    const { info, form } = this.props.InventoryRemindStore;
    const { isFormInit } = form;
    const group = [];
    isFormInit && info.map((c, i) => {
      const items = [];
      c.items.map((fields) => {
        if (fields.domkey[0] == 'capitalnum') {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@y3zogl@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              wrapperCol={{ span: `${fields.fieldcol}` }}
              underline
            >
              <WeaInput
                ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@oaqza4@${fields.domkey[0]}`}
                style={{ color: 'red' }}
                id="capitalnum"
                value={fields.value}
                viewAttr="1"
              />
            </WeaFormItem>),
            colSpan: 1,
          });
        } else {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@a6g9rj@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              wrapperCol={{ span: `${fields.fieldcol}` }}
              underline
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@zlrcpj@${fields.domkey[0]}`} fieldConfig={fields} form={form} />
            </WeaFormItem>),
            colSpan: 1,
          });
        }
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zx0l73@${i}`} needTigger title={c.title} center col={1} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }

  getTopButtons() {
    const { setVisible } = this.props.InventoryRemindStore;
    const btnArr = [];
    btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xy4k95@stockIn`} type="primary" onClick={() => { setVisible(true); }}>{getLabel(15306, '入库申请') }</Button>);
    return btnArr;
  }

  getRightMenu() {
    const btnArr = [];
    btnArr.push({
      icon: <i className="icon-coms-Upload-successfully" />,
      content: getLabel(15306, '入库申请'),
      key: '0',
    });
    	return btnArr;
  }

  onRightMenuClick() {
    // 入库申请
    const { setVisible } = this.props.InventoryRemindStore;
    setVisible(true);
  }

  getInstockRightMenu() {
    const { instockStore } = this.props.InventoryRemindStore;
    const { searchParams } = instockStore;
    const btnArr = [];
    {
      searchParams.tabkey == '0' &&
            btnArr.push({
              icon: <i className="icon-coms-Upload-successfully" />,
              content: getLabel(615, '提交'),
              key: '0',
            });
    }
    {
      searchParams.tabkey == '1' &&
            btnArr.push({
              icon: <i className={'icon-coms-Custom'} />,
              content: getLabel(32535, '显示列定制'),
              key: '1',
            });
    }
    	return btnArr;
  }

  onInstockRightMenuClick(key) {
    const { instockStore, setVisible } = this.props.InventoryRemindStore;
    if (key == '0') { // 提交
      instockStore.doInstock();
    }
    if (key == '1') { //
      instockStore.showColumn();
    }
  }

  getBottomButtons(flag) {
    const { InventoryRemindStore } = this.props;
    const { setVisible } = InventoryRemindStore;
    const { searchParams } = InventoryRemindStore.instockStore;
    const btnArr = [];
    { searchParams.tabkey == '0' && btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z26oz4@submit`} type="primary" onClick={() => { if (flag) { InventoryRemindStore.instockStore.doInstock(); } }}>{getLabel(615, '提交') }</Button>); }
    btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iy67oa@close`} type="primary" onClick={() => { setVisible(false); }}>{getLabel(309, '关闭')}</Button>);
    return btnArr;
  }

  getInstockFormFields() {
    const { mainTableInfo, addForm } = this.props.InventoryRemindStore.instockStore;
    const { isFormInit } = addForm;
    const group = [];
    isFormInit && mainTableInfo.map((c, i) => {
      const items = [];
      c.items.map((fields) => {
        const hide = false;
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@weczfl@${fields.domkey[0]}`}
            error={addForm.getError(fields)}
            tipPosition="bottom"
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@heazil@${fields.domkey[0]}`} fieldConfig={fields} form={addForm} />
          </WeaFormItem>),
          colSpan: 1,
          hide,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@k2owe9@${i}`} needTigger title={c.title} col={2} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@jbgz9x`} msg={props.error ? props.error : getLabel(383324, '对不起，该页面异常，请联系管理员')} />,
  { error: '' },
)(InventoryRemind);
